<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户管理</title>
    <!--使用此版本-->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue-2.6.10.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<br/>
    <div class="container" id="app">

        <!--数据列表-->
        <table id="dataList" class="table table-bordered  table-hover ">
            <thead>
                <tr>
                    <th class="sorting_asc">ID</th>
                    <th class="sorting_desc">用户名</th>
                    <th class="sorting_asc sorting_asc_disabled">密码</th>
                    <th class="sorting_desc sorting_desc_disabled">性别</th>
                    <th class="sorting">年龄</th>
                    <th class="text-center sorting">邮箱</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>

            <tr v-for="u in userList">
                <td>{{u.id}}</td>
                <td>{{u.username}}</td>
                <td>{{u.password}}</td>
                <td>{{u.sex}}</td>
                <td>{{u.age}}</td>
                <td class="text-center">{{u.email}}</td>
                <td class="text-center">
                    <button type="button" class="btn bg-olive btn-xs">详情</button>
                    <button type="button" class="btn bg-olive btn-xs" v-on:click="findById(u.id)">编辑</button>
                </td>
            </tr>

            </tbody>
        </table>


        <div id="myModal" class="modal modal-primary" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">用户信息</h4>
                    </div>
                    <div class="modal-body">

                        <div class="box-body">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">用户名:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" v-model="user.username">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">密码:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" v-model="user.password">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">性别:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" v-model="user.sex">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">年龄:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" v-model="user.age">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">邮箱:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" v-model="user.email">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-outline" data-dismiss="modal" @click="update()">修改</button>
                    </div>
                </div>
            </div>

        </div>

    </div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            userList:[],
            user:{},
        },
        methods:{
            findAll(){
                axios.get("user/findAll.do").then( (res) => {
                    if(res.status == 200){
                        this.userList = res.data;
                    };
                } ).catch();
            },

            findById(id){
                axios.get("user/findById.do?id="+id).then(  res=>{
                    if(res.status == 200){
                        this.user = res.data;
                        $("#myModal").modal("show");
                    };
                } );
            },

            update(){
                axios.post("user/update.do", this.user).then( res=>{
                    if(res.status == 200){
                        this.findAll();
                    };
                } );
            }
        },
        created(){
            this.findAll();
        }
    });
</script>
</body>
</html>